<template>
    <div class="settlement">
        <div class="orderList">
            <div class="title">填写并核对订单信息</div>
            <el-table :data="tableDate" tooltip-effect="dark" style="width: 100%;margin-bottom:10px">
                <el-table-column align="center" label="序号" type="index" width="60">
                </el-table-column>
                <el-table-column align="center" label="商品信息" width="100">
                    <template slot-scope="scope">
                        <img :src="scope.row.cover" alt="暂无图片" height="50px">
                    </template>
                </el-table-column>
                <el-table-column prop="name" align="center" label="名称" min-width="100">
                    <template slot-scope="scope">
                        《{{ scope.row.name}}》
                    </template>
                </el-table-column>
                <el-table-column prop="price" align="center" label="单价" min-width="80">
                    <template slot-scope="scope">
                        ￥{{ scope.row.price}}
                    </template>
                </el-table-column>
                <el-table-column prop="num" align="center" label="数量" min-width="110">
                </el-table-column>
                <el-table-column prop="totalPrice" align="center" label="小计" min-width="80">
                </el-table-column>
            </el-table>
        </div>
        <div class="title">收货信息</div>
        <div class="addressInfo">
            <div>
                <span>收件人：{{ currentAddress.receiverName }}</span>
                <span style="margin: 0 50px;">联系电话：{{ currentAddress.phone}}</span>
                <span>收货地址：{{ currentAddress.urbanAddr +  currentAddress.detailAddr }}</span>
            </div>
            <el-button size="small" @click="changeAddressBtn">修改地址</el-button>
        </div>
        <el-divider></el-divider>
        <div class="title">支付方式</div>
        <div>支付方式：在线支付</div>
        <el-divider></el-divider>
        <div class="confirmPrice">
            <div class="rightP">
                <div>{{ allTotalPrice }} 元</div>
                <div>{{ postage }} 元</div>
                <div>{{ finalPrice }}元</div>
            </div>
            <div class="leftP">
                <div>商品总价：</div>
                <div>运费：</div>
                <div>应付金额：</div>
            </div>
        </div>
        <el-button class="submitBtn" type="primary" size="small" @click="submitOrderBtn">提交订单</el-button>

        <el-dialog title="修改地址" :visible.sync="dialogVisible" width="60%">
            <div style="height: 350px;overflow:auto">
                <el-row :gutter="20">
                    <el-col :span="12" v-for="item in addressList" :key="item.id">
                        <el-card shadow="hover" :style="{'color':item.defaultValue?'#67c23a':''}" @click.native="choseDefaultAdd(item)">
                            <div>姓名：{{ item.receiverName }}</div>
                            <div>电话：{{ item.phone }}</div>
                            <div :title="item.urbanAddr+item.detailAddr ">地址：{{ item.urbanAddr }}{{ item.detailAddr }}</div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="closeBtn">取 消</el-button>
                <el-button size="small" type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import { put, get, postJSON, del } from "@/utils/request";
export default {
    data() {
        return {
            tableDate: [],
            addressList: [],
            currentAddress: {},
            dialogVisible: false,
            allTotalPrice: 0, //商品总价
            postage: 10, //邮费
            finalPrice: 0, //应付金额
        };
    },
    created() {
        this.tableDate = JSON.parse(sessionStorage.getItem("selectOption"));
        let num = 0;
        this.tableDate.forEach((item) => {
            num += item.totalPrice * 1;
        });
        this.allTotalPrice = num.toFixed(2) * 1;
        this.finalPrice = (this.allTotalPrice + this.postage).toFixed(2) * 1;

        console.log("tableDate", this.tableDate);
        console.log("id", this.tableDate[0].id);
        this.getAddressList();
    },
    methods: {
        // 获取用户的所有收货地址
        getAddressList() {
            this.addressList = [];
            get("/address").then((res) => {
                if (res && res.data) {
                    res.data.forEach((item) => {
                        if (item.defaultValue) {
                            this.currentAddress = item;
                        }
                    });
                    this.addressList = res.data;
                    console.log("address", this.currentAddress);
                }
            });
        },
        // 点击修改地址按钮    修改收货地址
        changeAddressBtn() {
            this.dialogVisible = true;
            console.log(123);
        },
        // 选中要修改的地址
        choseDefaultAdd(val) {
            console.log(val);
            val.defaultValue = true;
            this.addressList.forEach((item) => {
                if (item.id != val.id) {
                    item.defaultValue = false;
                }
            });
            this.currentAddress = val;
        },
        closeBtn() {
            this.dialogVisible = false;
            // 调用收货地址接口是为了在点击取消后 恢复为默认地址
            this.getAddressList();
        },

        // 提交订单 创建订单
        submitOrderBtn() {
            console.log("创建订单");
            let ids = [];
            this.tableDate.forEach((item) => {
                ids.push(item.id);
            });
            postJSON("/order", {
                receiveAddress:
                    this.currentAddress.urbanAddr +
                    this.currentAddress.detailAddr,
                receivePhone: this.currentAddress.phone,
                receiveUsername: this.currentAddress.receiverName,
                shopCarIds: ids,
            })
                .then((res) => {
                    console.log(4444, res);
                    if (res && res.message == "ok") {
                        this.$notify({
                            title: "成功",
                            message: "下单成功！",
                            type: "success",
                        });
                        this.$router.push({
                            path: "/shopCar",
                        });
                    }
                })
                .catch(() => {
                    this.$notify.error({
                        title: "错误",
                        message: "下单失败！",
                    });
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.settlement {
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
    .title {
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        font-weight: 700;
        color: #333;
        margin: 10px 0;
    }
    .addressInfo {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .confirmPrice {
        text-align: right;
        // div > span:first-of-type {
        //     margin-right: 50px;
        // }
        display: flex;
        flex-direction: row-reverse;
        div {
            line-height: 40px;
        }
        .rightP {
            margin-left: 30px;
            div:last-child {
                color: red;
                font-size: 22px;
            }
        }
    }
    .submitBtn {
        float: right;
        width: 120px;
        margin: 20px 0;
    }
    .el-card {
        height: 100px;
        margin-bottom: 20px;
        div {
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}
</style>
